<template>
    <div>
        <div class="title">
            <ul>
                <router-link tag="li" to="/">
                    <img src="../assets/image/logo-ea5.png" alt="">
                </router-link>

                <router-link tag="li" to="/Singer">
                    歌手
                </router-link>
                <router-link tag="li" to="/SongList">
                    榜单
                </router-link>
                <router-link tag="li" to="/Mine">
                    我的
                </router-link>
                <router-link tag="li" to="/Search">
                    搜索
                </router-link>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "headTitle.vue"
    }
</script>

<style scoped>
    .title {
        padding: 5px 20px;
    }

    .title ul {
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .title li {
        width: 33.3333px;
        text-align: center;
        color: #999;
    }

    .title li img {
        width: 30px;
        height: 30px;
    }
</style>